<template>
	
	<view>
		<view>
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-group title="注册信息" top="0">
					<uni-forms-item label="手机号" label-width="70px" name="username" label-align="center">
						<uni-easyinput type="text" v-model="formData.username" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="密码" label-width="70px" name="passwordText" label-align="center">
						<uni-easyinput type="password" v-model="formData.passwordText" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" label-width="70px" name="confirmPassword" label-align="center">
						<uni-easyinput type="password" v-model="formData.confirmPassword" placeholder="请确认密码" />
					</uni-forms-item>
					
					<uni-forms-item label="验证码" label-width="70px" name="code" label-align="center">
						<template v-slot:default> 
							<view style="display: flex;">
								<uni-easyinput class="code"  type="text" v-model="formData.code" placeholder="请输入验证码" />
								<image class="codeImg" :src="codeImgUrl" @click="refreshCode"></image>
							</view>
						</template>
					</uni-forms-item>
				</uni-group>
			</uni-forms>
			<view class="actionButtonGroup">
				<button class="actionButton" @click="formSubmit">注册</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { route } from "@/route/Route"
	
	import { StorageUtil } from '@/storage/StorageUtil'
	import { loginService } from '@/service/login/LoginService'
	import { encrypt } from "@/utils/Encryption"
	export default {
		data() {
			return {
				formData:{
					username: "",
					password: "",
					passwordText: "",
					confirmPassword: "",
					uuid: ""
				},
				rules:{
					username: {
						rules:[
							{
								required: true,
								errorMessage: '请填写手机号',
							},
							// 对name字段进行长度验证
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入正确手机号',
							},
							{
								validateFunction:function(rule,value,data,callback){
									if (value.indexOf('1')!==0) {
										callback('手机号格式不正确')
										
										return false
									}
									return true
								}
							}
						],
						label:'手机号'
					},
					passwordText: {
						rules:[
							{
								required: true,
								errorMessage: '请填写密码',
							},
							// 对name字段进行长度验证
							{
								minLength: 8,
								maxLength: 13,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'密码'
					},
					confirmPassword:{
						rules:[
							{
								required: true,
								errorMessage: '请确认密码',
							},
							{
								validateFunction:function(rule,value,data,callback){
									if (data.passwordText !== data.confirmPassword) {
										callback('与密码不一致')
										
										return false
									}
									return true
								}
							}
						],
						label:'确认密码'
					},
					code: {
						rules:[
							{
								required: true,
								errorMessage: '请填写验证码',
							}
						],
						label:'验证码'
					}
				},
				codeImgUrl: ""
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "注册"
			})
			
			this.refreshCode()
		},
		methods:{
			formSubmit(){
				// 在 onLoad 生命周期中，formData添加了一个 id 字段 ，此时这个字段是不参数校验的，所以结果中不返回
				// 在 validate(['id']) 方法中，指定第一个参数 ，即可返回id字段
				this.formData.password = encrypt(this.formData.passwordText)
				this.$refs.form.validate(['id'],(err,formData)=>{
					if(!err){
						loginService.register(this.formData,(res)=>{
							
							console.log('success',res)
							StorageUtil.setStorage(StorageUtil.TOKEN,res.token)
							StorageUtil.setStorage(StorageUtil.USER_ID,res.userinfo.user.id)
							route.reLaunchTo({name:'home'})
						})
					}
				})
			},
			refreshCode(){
				loginService.code((res)=>{
					this.formData.uuid = res.uuid
					this.codeImgUrl = res.img
				})
			},
		}
	}
</script>

<style lang="scss">

	.actionButtonGroup{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: -webkit-fill-available
	}
	.actionButton{
		width: 280rpx;
		// margin: 20rpx;
		background-color: $uni-primary;
		color: $uni-white;
	}
	
	.code{
		width: 330rpx;
		display: inline-block;
	}
	.codeImg{
		width: 150rpx;
		height: 68rpx;
	}
	.uni-forms-item__content{
		    display: flex;
		    flex-direction: row;
	}
</style>
